import React ,{memo,useState}from 'react';
import { useEffect } from 'react';
import { useHistory } from 'react-router-dom';
import styled from 'styled-components';

const Container=styled.div`
    width: 10rem;
    height: 1.173rem;
    .svg{
        position: absolute;
        top: 0.23rem;
    }
    svg{
        width: 0.8rem;
        height: 0.4rem;
    }
    .input{
        position: absolute;
        top: 0.266rem;
        left: 1rem;
        height: 0.8rem;
        width: 7.3rem;
        border: none;
        background-color: #f5f0f0;
    }
    .cancel{
        position: absolute;
        right: 0.234rem;
        height: 1rem;
        line-height: 1rem;
        top: 0.166rem;
    }
`

const SearchInput=(props)=>{
    // console.log(props);
    const {queryValue}=props;
    const navigator=useHistory()
    const [value,setValue]=useState('');
    const handleChange=(e)=>{
        setValue(e.target.value)
        // console.log(e.target.value);
        
    }
    useEffect(()=>{
        if(queryValue!==value){
            setValue(queryValue)
        }
    },[queryValue])
 
    return(
        <>
        <Container>
        <div className="svg" onClick={()=>navigator.push('/home/main')}>
        <svg t="1645261160879" className='svg' viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2055" width="200" height="200"><path d="M929.70745 487.72513 167.942967 487.72513l358.793666-318.918493c12.390191-11.012821 13.505595-29.982872 2.493797-42.37204-11.010775-12.388145-29.979802-13.506619-42.369993-2.492774L74.839499 490.168786c-6.407943 5.695722-10.073426 13.859659-10.073426 22.432918 0 8.573259 3.665483 16.737196 10.073426 22.432918l412.019914 366.227985c5.717212 5.082762 12.83533 7.581676 19.926842 7.581676 8.275477-0.002047 16.515139-3.403516 22.443152-10.07445 11.012821-12.389168 9.897418-31.359218-2.493797-42.37204L179.893136 548.100196l749.814314 0c16.575514 0 30.013571-13.612019 30.013571-30.187533S946.283987 487.72513 929.70745 487.72513z" p-id="2056"></path></svg>
        </div>
        <input  className='input' placeholder='搜索商品' value={value} onChange={handleChange} />
        <div className="cancel">取消</div>
        </Container>
        </>
    )
}
export default memo(SearchInput)